<template>
  <div class="status-overview">
    <div :style="whStyle(width, height)">
      <spin v-if="showSpin" fix size="large"></spin>
      <!-- 画布div-->
      <div class="content-div" :style="whStyle(contentWidth, contentHeigth)">
        <div v-for="(item, index) in huaBuList" :key="index" class="pa">
          <div class="canvas-div" :style="huabuStyle(item)">
            <div class="title-div">
              <img
                v-if="item.titleIcon !== null"
                :style="whStyle(imgWidth, imgHeigth, widthRatio, heigthRatio)"
                :src="imgList[item.titleIcon]"
              />
              <span :style="textStyle(item)"> {{ item.titleName }}</span>
            </div>
          </div>
        </div>
        <!-- 墙体div-->
        <div v-for="(item, index) in qiangTiList" :key="index" class="pa">
          <div class="pa" :style="huabuStyle(item)"> </div>
        </div>
        <!-- 打包机-->
        <div
          v-if="url && (url.includes('dszhcj') || url.includes('wxsfzx'))"
          class="baler-div"
          :style="balerStyle()"
        >
        </div>
        <div
          v-if="url && (url.includes('dszhcj') || url.includes('wxsfzx'))"
          class="baler-div-copy"
          :style="balerStyle()"
        >
        </div>
        <!-- 温湿度点位-->
        <template v-for="(item, index) in wenShiDuList">
          <div v-if="wenShiDuSwitch" :key="index" class="pa">
            <div class="humiture-div" :style="positionStyle(item, 'axisX', 'axisY')">
              <div @mouseenter="xianShiWenShiDu(item, index)" @mouseleave="yiChuWenShiDu">
                <Tooltip theme="light">
                  <template v-slot:content>
                    <div>
                      <p>当前温度：{{ wenShiDuDict.temperatureActual }}℃</p>
                      <p>当前湿度：{{ wenShiDuDict.humidityActual }}%</p>
                      <p>设定温度：{{ wenShiDuDict.temperatureSet }}℃</p>
                      <p>设定湿度：{{ wenShiDuDict.humidityActual }}%</p>
                      <div>更新于：{{ wenShiDuDict.timeStamp }}</div>
                    </div>
                  </template>
                  <div class="anim1" @click="wenShiDuDianWeiClick(item)"></div>
                </Tooltip>
              </div>
            </div>
          </div>
        </template>
        <!-- 自己map时候要自己加一个字段圆的半径的（通过最大自最小值做比较）-->
        <!-- box-shadow:  5px 5px 5px #d7d9d9-->
        <!-- box-shadow:  4px 4px 4px #efefef,4px -4px 4px #efefef,-4px 4px 4px #efefef,-4px -4px 4px #efefef;-->
        <div v-for="(item, index) in jiTaiList" :key="index" class="pa">
          <div
            class="pa"
            :title="tiShiTitle(item)"
            @click="jiTaiClick(item)"
            :style="positionStyle(item, 'x', 'y')"
          >
            <div v-if="item.equipmentDirection === 1" class="machine-div">
              <!-- 机头圆圈-->
              <!-- <div-->
              <!--     style="z-index: 3; height: 100%;  max-height: 50px; min-height: 20px;   border-radius: 5px; color: #FFFFFF; background-color: #9a6e3a; text-align: center;"-->
              <!--     :style="{width: jiSuanYuan(item.height*heigthRatio) + 'px', lineHeight:jiSuanYuan(item.height*heigthRatio) + 'px', borderRadius: jiSuanYuan(item.height*heigthRatio)/2 + 'px', fontSize: jiSuanYuan(item.height*heigthRatio) === 20 ? '12px':'12px'}">-->
              <!--   {{ item.machineName }}-->
              <!-- </div>-->
              <!-- 机身-->
              <div
                class="machine-body-div"
                v-if="bodyJudge(item, 13)"
                :class="[{ bianKuangClass: item.materialColor === null ? true : false }]"
              >
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    color: #fff;
                    height: 80%;
                    border-radius: 3px 0 0 0;
                  "
                  class="machine-body-div-content"
                  :style="bgStyle(item)"
                >
                  <span :style="spanStyle()"> {{ item.machineName }} </span>
                </div>
                <!-- 进度条-->
                <div style="height: 20%; border-radius: 0 0 0 3px; background-color: #fff">
                  <div
                    class="progress-bar animate"
                    :style="{ width: item.yarnPercent + '%' }"
                  ></div>
                </div>
              </div>
              <div
                v-else-if="bodyJudge(item, 14)"
                class="machine-body-div"
                :class="[{ bianKuangClass: item.materialColor === null ? true : false }]"
              >
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    color: #fff;
                    height: 75%;
                    border-radius: 3px 0 0 0;
                  "
                  :style="bgStyle(item)"
                >
                  <span class="span-copy" :style="spanStyle(0.75)">{{ item.machineName }}</span>
                </div>
                <!-- 进度条-->
                <div style="height: 25%; border-radius: 0 0 0 3px; background-color: #fff">
                  <div
                    class="progress-bar animate"
                    :style="{ width: item.yarnPercent + '%' }"
                  ></div>
                </div>
              </div>
              <div
                v-else
                :class="[{ bianKuangClass: item.materialColor === null ? true : false }]"
                :style="bgStyle(item, 'lh')"
                style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  flex-grow: 2;
                  border-radius: 3px 0 0 3px;
                "
              >
                <span class="span-copy2" :style="spanStyle(0.75)">{{ item.machineName }}</span>
              </div>
              <!-- 指示灯-->
              <div
                :style="{ width: (item?.width || 0) * 0.1 + 'px' }"
                style="min-width: 10px; max-width: 30px; height: 100%; border-radius: 0 3px 3px 0"
                :class="[
                  'zhuangTai' + zhuangTaiIndex(item),
                  {
                    breath_light:
                      item.stateCode === 4 || item.stateCode === 14 || item.stateCode === 16
                  }
                ]"
              >
              </div>
            </div>
            <!--          竖向排列-->
            <div
              v-if="item.equipmentDirection === 2"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <!--            机头圆圈-->
              <!--            <div-->
              <!--                style="z-index: 3; width: 100%;  max-width: 50px; min-width: 20px; border-radius: 5px; color: #FFFFFF; background-color: #9a6e3a; text-align: center;"-->
              <!--                :style="{height: jiSuanYuan(item.width*widthRatio) + 'px', lineHeight:jiSuanYuan(item.height*heigthRatio) + 'px', borderRadius: jiSuanYuan(item.width*widthRatio)/2 + 'px', fontSize: jiSuanYuan(item.height*heigthRatio) === 20 ? '12px':'12px'}">-->
              <!--              {{ item.machineName }}-->
              <!--            </div>-->
              <!--            机身-->
              <div
                v-if="
                  item.craftNodeName !== '络筒' &&
                  item.craftNodeName !== '抓棉' &&
                  item.craftNodeName !== '异纤' &&
                  item.craftNodeName !== '混棉' &&
                  item.craftNodeName !== '开棉' &&
                  item.yarnPercent !== null &&
                  showString === '关闭'
                "
                style="
                  width: 100%;
                  flex-grow: 2;
                  color: #ffffff;
                  display: flex;
                  flex-direction: row;
                "
              >
                <div
                  :class="[{ bianKuang2Class: item.materialColor === null ? true : false }]"
                  :style="bgStyle(item, 'fz')"
                  style="
                    width: 75%;
                    text-align: center;
                    color: #ffffff;
                    height: 100%;
                    border-radius: 3px 0 0 0;
                  "
                >
                  <span
                    style="
                      display: block;
                      width: 100%;
                      font-size: 12px;
                      text-align: center;
                      color: #898787;
                    "
                    :style="{
                      transform: 'scale(' + heigthRatio * 0.75 + ')',
                      color: pingZhongColor == false ? '#999999' : '#ffffff'
                    }"
                    >{{ item.machineName }}</span
                  >
                </div>
                <!--              进度条-->
                <div
                  style="width: 25%; height: 100%; border-radius: 0 3px 0 0; background-color: #fff"
                >
                  <div
                    class="progress-bar animate"
                    :style="{ height: item.yarnPercent + '%' }"
                    style="width: 100%; border-radius: 0 3px 3px 3px"
                  ></div>
                </div>
              </div>
              <div
                v-else
                :class="[{ bianKuang2Class: item.materialColor === null ? true : false }]"
                :style="bgStyle(item)"
                style="
                  text-align: center;
                  width: 100%;
                  color: #ffffff;
                  flex-grow: 2;
                  border-radius: 3px 3px 0 0;
                "
              >
                <span
                  style="
                    display: block;
                    width: 100%;
                    font-size: 12px;
                    text-align: center;
                    color: #898787;
                  "
                  :style="{
                    transform: 'scale(' + heigthRatio * 0.75 + ')',
                    color: pingZhongColor == false ? '#999999' : '#ffffff'
                  }"
                  >{{ item.machineName }}</span
                >
              </div>
              <!--            指示灯-->
              <div
                :style="{ height: item.height * 0.1 + 'px' }"
                style="width: 100%; max-height: 30px; min-height: 10px; border-radius: 0 0 3px 3px"
                :class="[
                  'zhuangTai' + item.stateCode,
                  {
                    breath_light:
                      item.stateCode === 4 || item.stateCode === 14 || item.stateCode === 16
                  }
                ]"
              >
              </div>
            </div>
          </div>
        </div>
        <div
          class="shiShiWenDuDiv"
          :style="{ left: wenShiDuLeft * widthRatio + 'px', top: wenShiDuTop * heigthRatio + 'px' }"
          v-if="wenShiDuBool === true"
        >
          <div class="flex flex-around-justify flex-align-center">
            <div style="font-weight: bold; font-size: 22px">{{ wenShiDuDict.name }}</div>
            <div>
              <Tag
                style="
                  height: 30px;
                  width: 60px;
                  text-align: center;
                  line-height: 30px;
                  font-size: 18px;
                  font-weight: bold;
                  margin-left: 5px;
                  margin-top: -3px;
                "
                v-if="wenShiDuDict.humitureState === 0"
                color="success"
                >正常
              </Tag>
              <Tag
                style="
                  height: 30px;
                  width: 60px;
                  text-align: center;
                  line-height: 30px;
                  font-size: 18px;
                  font-weight: bold;
                  margin-left: 5px;
                  margin-top: -3px;
                "
                v-else-if="wenShiDuDict.humitureState === 1"
                color="warning"
                >故障
              </Tag>
              <Tag
                style="
                  height: 30px;
                  width: 100px;
                  text-align: center;
                  line-height: 30px;
                  font-size: 18px;
                  font-weight: bold;
                  margin-left: 5px;
                  margin-top: -3px;
                "
                v-else-if="wenShiDuDict.humitureState === 2"
                color="error"
                >通信异常
              </Tag>
            </div>
          </div>
          <div class="flex flex-around-justify flex-align-center" style="margin-top: 25px">
            <div style="font-weight: bold; font-size: 26px">当前温度</div>
            <div style="font-weight: bold; font-size: 26px">当前湿度</div>
          </div>
          <div class="flex flex-around-justify flex-align-center" style="margin-top: 15px">
            <div style="font-weight: bold; font-size: 36px"
              >{{ wenShiDuDict.temperatureActual }}℃</div
            >
            <div style="font-weight: bold; font-size: 36px">{{ wenShiDuDict.humidityActual }}%</div>
          </div>
          <div class="flex flex-around-justify flex-align-center" style="margin-top: 15px">
            <div style="font-weight: bold">设定温度：{{ wenShiDuDict.temperatureSet }}℃</div>
            <div style="font-weight: bold">设定湿度：{{ wenShiDuDict.humiditySet }}%</div>
          </div>
          <div class="flex flex-around-justify flex-align-center" style="margin-top: 35px">
            <div style="font-weight: bold">{{ wenShiDuDict.timeStamp }}</div>
          </div>
        </div>
      </div>

      <ce-bian-lan
        :zan-bi-dict="zanBiDict"
        ref="ceBianLanRef"
        @jingDuTiaoClick="(val) => customFunction(val, 'showString')"
        @pingZhongFengBuClick="(val) => customFunction(val, 'pingzhong')"
      ></ce-bian-lan>
      <can-shu-model
        ref="canShuModelRef"
        :gong-xu-str="gongXuStr"
        :biao-qian-bool="biaoQianBool"
      ></can-shu-model>
      <canShuModelZhiJi ref="canShuModelZhiJiRef"></canShuModelZhiJi>
      <luo-tong-can-shu-model ref="luoTongCanShuModel"></luo-tong-can-shu-model>
      <tu-li-suo-ming-model ref="tuLiSuoMingModelRef"></tu-li-suo-ming-model>
      <wen-shi-du-ze-xiani-tu ref="wenShiDuZeXianTu"></wen-shi-du-ze-xiani-tu>
      <floatBtn :can-dan-bool="canDanBool" @handlepaly="handleaudioplay" style="cursor: pointer">
        <!-- @tuoDongChange="tuoDongChange" -->
      </floatBtn>
      <!--      <transition name="move-right">-->
      <div
        v-if="canDanBool"
        :style="{ left: left + 'px', top: top + 'px' }"
        style="
          display: flex;
          align-items: center;
          padding-left: 20px;
          position: absolute;
          z-index: 999;
          width: 650px;
          height: 50px;
          background: #ffffff;
          border-radius: 50px;
        "
      >
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 30px;
            border-radius: 3px;
            margin-right: 16px;
          "
        >
          <a
            style="font-size: 15px; font-weight: bold; margin-right: 30px"
            @click="tuLieSuoMingClick"
          >
            <Icon type="md-help-circle" />
            图例说明</a
          >
          <span
            v-if="url && !url.includes('msszh')"
            style="font-size: 15px; font-weight: 600; color: #2d8cf0"
            >温湿度:
          </span>
          <el-switch
            v-if="url && !url.includes('msszh')"
            v-model="wenShiDuSwitch"
            size="large"
            class="ivu-ml-8 ivu-mr-16"
            @change="(val) => customFunction(val, 'wenshidu')"
          />
          <!-- <Switch
            v-if="url && !url.includes('msszh')"
            @on-change="wenShiDuClick"
            v-model="wenShiDuSwitch"
            class="ivu-ml-8 ivu-mr-16"
          >
            <template v-slot:open>
              <span type="md-checkmark"></span>
            </template>
            <template v-slot:close>
              <span type="md-close"></span>
            </template>
          </Switch> -->

          <span style="font-size: 15px; font-weight: 600; color: #2d8cf0">品种: </span>
          <el-switch
            v-model="pingZhongColor"
            size="large"
            class="ivu-ml-8"
            @change="(val) => customFunction(val, 'pingzhong')"
          />
          <!-- <Switch @on-change="pingZhongFengBuClick" v-model="pingZhongColor" class="ivu-ml-8">
            <template v-slot:open>
              <span type="md-checkmark"></span>
            </template>
            <template v-slot:close>
              <span type="md-close"></span>
            </template>
          </Switch> -->
          <span
            style="
              display: inline-block;
              margin-left: 20px;
              font-size: 15px;
              font-weight: 600;
              color: #2d8cf0;
            "
            >进度条:
          </span>
          <el-switch
            v-model="jinDuBool"
            size="large"
            class="ivu-ml-8"
            @change="(val) => customFunction(val, 'showString')"
          ></el-switch>
          <!-- <Switch @on-change="jingDuTiaoClick" v-model="jinDuBool" class="ivu-ml-8">
            <template v-slot:open>
              <span type="md-checkmark"></span>
            </template>
            <template v-slot:close>
              <span type="md-close"></span>
            </template>
          </Switch> -->
          <Button
            class="ivu-ml-16"
            @click="ceBianLanClick"
            type="primary"
            icon="md-arrow-round-back"
            >车间概况</Button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { zhuanTai } from '@/utils/custom/index'
  import floatBtn from '@/components/custom/xuanFuCaiDan/floatBtn.vue'
  import tuLiSuoMingModel from '@/views/shengChanJianShi/zhuangTaiZongLan/components/tuBiao/tuLiSuoMingModel.vue'
  import ceBianLan from '@/views/shengChanJianShi/zhuangTaiZongLan/components/ceBianLan.vue'
  import canShuModel from '@/components/custom/fenZuZhuangTai/xiShaCanShuModel.vue'
  import canShuModelZhiJi from '@/components/custom/fenZuZhuangTai/canShuModelZhiJi.vue'
  import luoTongCanShuModel from '@/components/custom/fenZuZhuangTai/luoTongCanShuModel.vue'
  import wenShiDuZeXianiTu from '@/views/shengChanJianShi/zhuangTaiZongLan/components/wenShiDuZeXianiTu.vue'
  import {
    postYongHuShiYongXiGuan,
    getYongHuShiYongXiGuan,
    putYongHuShiYongXiGuan
  } from '@/api/gongGongChaXun'
  import {
    getHuoQuHuaBuList,
    getHuoQuCheJianBuJu,
    getWenShiDuDianWeiXinXi,
    getHuoQuYuanXinZhuangTai,
    getShiShiWenShiDu,
    postWenShiDuDianWeiLiShi
  } from '@/api/shengChanJianShi'
  import qinghuaIcon from '@/assets/images/gongXu/qingHua.png'
  import shumianIcon from '@/assets/images/gongXu/shuMian.png'
  import yubingIcon from '@/assets/images/gongXu/yuBing.png'
  import bingTiaoIcon from '@/assets/images/gongXu/bingTiao.png'
  import mobingIcon from '@/assets/images/gongXu/moBing.png'
  import jingshuIcon from '@/assets/images/gongXu/jingShu.png'
  import cushaIcon from '@/assets/images/gongXu/cuSha.png'
  import xishajiIcon from '@/assets/images/gongXu/xiSha.png'
  import luotongIcon from '@/assets/images/gongXu/luoTong.png'
  import daBaoJiIcon from '@/assets/images/gongXu/daBaoJi.png'
  import weiShaIcon from '@/assets/images/gongXu/weiSha.png'
  import qiLiuFangIcon from '@/assets/images/gongXu/qiLiuFang.png'

  import type {
    UserHabits,
    Humiture,
    CanvasContainer,
    MachineTable,
    MillGroup
  } from '@/views/shengChanJianShi/zhuangTaiZongLan/interface.ts'

  const left = ref(null)
  const top = ref(null)
  const gongXuStr = ref()
  const seleWenDuJi = ref(null)
  const startTime = ref(null)
  const url = ref('')
  const clearTimeSet = ref()
  const wenShiDuSwitch = ref(false)
  const wenShiDuBool = ref(false)
  const canDanBool = ref(false)
  const jinDuBool = ref(false)
  const pingZhongColor = ref(false)
  const biaoQianBool = ref(true)
  const showSpin = ref(true)
  const wenShiDuDict = ref<any>({})
  const zanBiDict = ref<MillGroup[]>([])
  const JiTaiBuJu = ref<MachineTable[]>([])
  const seleKongTiao = ref({})
  const wenShiDuList = ref<Humiture[]>([])
  const qiangTiList = ref<CanvasContainer[]>([])
  const huaBuList = ref<CanvasContainer[]>([])
  const jiTaiList = ref<MachineTable[]>([])
  const jiLuDict = ref<UserHabits[]>([])
  //   const wenShiDuWidth = ref(330)
  //   const wenShiDuHeight = ref(300)
  const wenShiDuLeft = ref(0)
  const wenShiDuTop = ref(0)
  const contentWidth = ref(0)
  const contentHeigth = ref(0)
  const width = ref(0)
  const height = ref(0)
  const widthRatio = ref(1)
  const heigthRatio = ref(1)
  const imgWidth = ref(22)
  const imgHeigth = ref(20)
  const fontSize = ref(10)
  const showString = ref('显示')
  const jiShengColor = ref('#fff')
  const JianBianSe = ref('#797979')
  //   const fontsizeRem = ref('0.01vh')
  const imgList = ref([
    qinghuaIcon,
    shumianIcon,
    yubingIcon,
    bingTiaoIcon,
    mobingIcon,
    jingshuIcon,
    cushaIcon,
    xishajiIcon,
    luotongIcon,
    daBaoJiIcon,
    weiShaIcon,
    qiLiuFangIcon
  ])

  // style方法
  const huabuStyle = (item) => {
    return {
      height: item?.areaHeight * heigthRatio.value + 'px',
      width: item?.areaWidth * widthRatio.value + 'px',
      top: item.y * heigthRatio.value + 'px',
      left: item.x * widthRatio.value + 'px',
      backgroundColor: item.areaColor
    }
  }
  const whStyle = (w, h, wRation: number = 1, hRation: number = 1) => {
    return {
      height: h * hRation + 'px',
      width: w * wRation + 'px'
    }
  }
  const textStyle = (item) => {
    return {
      fontSize: item.titleFontSize * widthRatio.value + 'px',
      color: item.titleFontColor
    }
  }
  const balerStyle = () => {
    return {
      height: 320 * heigthRatio.value + 'px',
      width: 100 * widthRatio.value + 'px',
      top: 90 * heigthRatio.value + 'px',
      left: 470 * widthRatio.value + 'px'
    }
  }
  const positionStyle = (item, x, y) => {
    return {
      height: item.height * heigthRatio.value + 'px',
      width: item.width * widthRatio.value + 'px',
      top: item[y] * heigthRatio.value + 'px',
      left: item[x] * widthRatio.value + 'px'
    }
  }
  const spanStyle = (ratio: number = 0.8) => {
    return {
      transform: `scale(${heigthRatio.value * ratio})`,
      color: pingZhongColor.value == false ? '#999' : '#fff'
    }
  }
  const bgStyle = (item, flag: string = '') => {
    const obj: any = {
      backgroundColor: pingZhongColor.value === false ? jiShengColor.value : item.materialColor
    }
    if (flag === 'fz') {
      obj.fontSize = fontSize.value * widthRatio.value + 'px'
    } else if (flag === 'lh') {
      obj.lineHeight = item.height * heigthRatio.value + 'px'
    }
    return obj
  }
  // ------------------------
  // 判断方法
  const bodyJudge = (item, num) => {
    return (
      item.yarnPercent !== null &&
      showString.value === '关闭' &&
      item.height * heigthRatio.value > num &&
      !['抓棉', '异纤', '混棉', '开棉', '并并联', '尾纱', '络筒'].includes(item.craftNodeName)
    )
  }
  // ------------------------
  const getYongHuShiYongXiGuanData = () => {
    getYongHuShiYongXiGuan('110100').then((res: any) => {
      if (res == null || res.length == 0) {
        postYongHuShiYongXiGuanFunc()
      } else {
        jiLuDict.value = res
        let wendu: any = jiLuDict.value.find((value) => {
          return value.key == '温湿度'
        })
        let pingZhong: any = jiLuDict.value.find((value) => {
          return value.key == '品种'
        })
        let jinDuTiao: any = jiLuDict.value.find((value) => {
          return value.key == '进度条'
        })
        wenShiDuSwitch.value = wendu.value == 'true' ? true : false
        jinDuBool.value = jinDuTiao.value == '关闭' ? true : false
        showString.value = jinDuTiao.value
        pingZhongColor.value = pingZhong.value == 'true' ? true : false
      }
    })
  }

  const postYongHuShiYongXiGuanFunc = () => {
    let data1 = [
      { pageCode: '110100', key: '温湿度', value: false },
      { pageCode: '110100', key: '品种', value: false },
      { pageCode: '110100', key: '进度条', value: '关闭' }
    ]
    postYongHuShiYongXiGuan(data1).then(() => {
      getYongHuShiYongXiGuanData()
    })
  }

  const handleaudioplay = (left, top) => {
    canDanBool.value = !canDanBool.value
    left.value = left - 600
    top.value = top
  }

  const zhuangTaiIndex = (item) => {
    return item.craftNodeName === '络筒' && url.value.indexOf('fjcy9') !== -1 ? 1 : item.stateCode
  }

  // 图例说明点击
  const tuLiSuoMingModelRef = ref()
  const tuLieSuoMingClick = () => {
    tuLiSuoMingModelRef.value.show()
  }

  // 获取温湿度点位信息
  const getWenShiDuDianWeiXinXiData = () => {
    getWenShiDuDianWeiXinXi().then((res: any) => {
      wenShiDuList.value = res
    })
  }

  // 获取画布和墙体
  const getHuoQuHuaBuData = () => {
    getHuoQuHuaBuList()
      .then((res: any) => {
        qiangTiList.value = res.filter((val) => {
          return val.titleName === '墙体'
        })
        huaBuList.value = res.filter((val) => {
          return val.titleName !== '墙体'
        })
        huaBuList.value.forEach((value) => {
          value.areaColor = ''
        })
      })
      .catch(() => {})
  }

  const getHuoQuCheJianBuJuData = () => {
    getHuoQuCheJianBuJu().then((res: any) => {
      JiTaiBuJu.value = JSON.parse(JSON.stringify(res.millLayout))
      jiShengColor.value = res.defaultMachineColor
      jiTaiList.value = res.millLayout
      getHuoQuYuanXinZhuangTaiData()
    })
  }

  const wenShiDuZeXianTu = ref()
  const wenShiDuDianWeiClick = (item) => {
    let data = {
      start: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm'),
      end: dayjs().format('YYYY-MM-DD HH:mm'),
      machineDocumentIds: [item.id]
    }
    postWenShiDuDianWeiLiShi(data)
      .then((res: any) => {
        let wenDuData: any = []
        let shiDuData: any = []
        res[0].detail.forEach((value) => {
          wenDuData.push([
            dayjs(value.timeStamp).format('YYYY-MM-DD HH:mm'),
            Math.round(value.temperatureActual * 10) / 10
          ])
          shiDuData.push([
            dayjs(value.timeStamp).format('YYYY-MM-DD HH:mm'),
            Math.round(value.humidityActual * 10) / 10
          ])
        })
        let echarsData = {
          title: item.name + ':温湿度历史趋势图',
          wenDu: { data: wenDuData, title: '温度' },
          shiDu: { data: shiDuData, title: '湿度' }
        }
        wenShiDuZeXianTu.value.modalShow(echarsData)
      })
      .catch(() => {})
  }

  const getHuoQuYuanXinZhuangTaiData = () => {
    // jiTaiList.value.forEach((value) => {
    //   value.stateCode = value.stateCode === 4 ? 100 : value.stateCode
    //   value.stateCode = value.stateCode === 14 ? 100 : value.stateCode
    //   value.stateCode = value.stateCode === 16 ? 100 : value.stateCode
    // })
    jiTaiList.value.forEach((value: any) => {
      // 将状态码 4、14、16 统一转换为 100
      const targetCodes = [4, 14, 16]
      value.stateCode = targetCodes.includes(value.stateCode) ? 100 : value.stateCode
    })
    getHuoQuYuanXinZhuangTai().then((res: any) => {
      let arr = ref<MachineTable[]>([])
      showSpin.value = false
      zanBiDict.value = res.millStateGroup
      res.millStateDetail.forEach((value) => {
        let jiTai = JiTaiBuJu.value.find((value2) => {
          return value.id === value2.id
        })
        if (jiTai !== undefined) {
          if (url.value.indexOf('msszh') !== -1) {
            if (value.stateCode === null || value.stateCode === undefined || value.stateCode === 5)
              value.stateCode = 1
          }
          arr.value.push({
            id: jiTai.id,
            machineName: jiTai.machineName,
            equipmentDirection: jiTai.equipmentDirection,
            machineTypeId: jiTai.machineTypeId,
            machineTypeName: jiTai.machineTypeName,
            machineTypeDescription: jiTai.machineTypeDescription,
            craftNodeName: jiTai.craftNodeName,
            craftNodeId: jiTai.craftNodeId,
            x: jiTai.x,
            y: jiTai.y,
            width: jiTai.width,
            height: jiTai.height,
            machineDisplayState: value.machineDisplayState,
            stateCode: value.stateCode,
            yarnPercent: value.yarnPercent > 100 ? 100 : value.yarnPercent,
            materialName: value.materialName,
            fixLength: value.fixLength,
            currentLength: value.currentLength === null ? '' : parseInt(value.currentLength),
            materialColor: materialColorSheZhi(value.materialColor)
          })
        }
      })
      if (arr.value.length !== 0) jiTaiList.value = JSON.parse(JSON.stringify(arr.value))
    })
  }

  const materialColorSheZhi = (color) => {
    // if (color == null) {
    //   return JianBianSe.value
    // } else if (color.length != 7) {
    //   return jiShengColor.value
    // } else {
    //   return color
    // }
    // 检查是否为 null 或 undefined，若是则返回默认渐变色
    if (color == null) {
      return JianBianSe.value
    }

    // 验证颜色格式是否为 #RRGGBB
    const isValidHex = /^#[0-9A-F]{6}$/i.test(color)
    return isValidHex ? color : jiShengColor.value
  }

  // 计算圆的直径
  //   const jiSuanYuan = (length) => {
  //     if (length > 40) {
  //       return 40
  //     } else if (length > 20 && length < 40) {
  //       return length
  //     } else if (length < 20) {
  //       return 20
  //     }
  //   }

  // 温湿度点位/品种分布布局图/进度条  回调公用方法
  const customFunction = (val, flag) => {
    // 使用对象映射代替条件分支
    const flagHandlers = {
      wenshidu: { ref: wenShiDuSwitch, name: '温湿度', transform: (v) => v },
      pingzhong: { ref: pingZhongColor, name: '品种', transform: (v) => v },
      showString: { ref: showString, name: '进度条', transform: (v) => (v ? '关闭' : '显示') }
    }

    // 获取对应处理器
    const handler = flagHandlers[flag]
    if (!handler) return // 无效flag直接返回

    // 设置值和转换值
    const { ref, name, transform } = handler
    ref.value = transform(val)

    // 准备数据并发送请求
    const data = { pageCode: '110100', key: name, value: val }

    // 添加错误处理
    const dict = jiLuDict.value.find((item) => item.key === name)
    if (!dict) {
      console.error(`未找到匹配的使用习惯记录: ${name}`)
      return
    }

    putYongHuShiYongXiGuan(dict.id, data).catch((error) => {
      console.error('保存用户使用习惯失败:', error)
    })

    // let tempStr = ''
    // if (flag == 'wenshidu') {
    //   wenShiDuSwitch.value = val
    //   tempStr = '温湿度'
    // } else if (flag == 'pingzhong') {
    //   pingZhongColor.value = val
    //   tempStr = '品种'
    // } else if (flag == 'showString') {
    //   showString.value = val ? '关闭' : '显示'
    //   tempStr = '进度条'
    // }

    // let data = { pageCode: '110100', key: tempStr, value: val }
    // let dict: any = jiLuDict.value.find((value) => {
    //   return value.key == tempStr
    // })
    // putYongHuShiYongXiGuan(dict.id, data).then(() => {})
  }

  // 温湿度点位
  // const wenShiDuClick = (val) => {
  //   // if (val === true) {
  //   //   wenShiDuSwitch.value = true
  //   // } else {
  //   //   wenShiDuSwitch.value = false
  //   // }
  //   wenShiDuSwitch.value = val
  //   let data = { pageCode: '110100', key: '温湿度', value: val }
  //   let dict: any = jiLuDict.value.find((value) => {
  //     return value.key == '温湿度'
  //   })
  //   putYongHuShiYongXiGuan(dict.id, data).then(() => {})
  // }

  // 品种分布布局图
  // const pingZhongFengBuClick = (val) => {
  //   // if (val === true) {
  //   //   pingZhongColor.value = true
  //   // } else {
  //   //   pingZhongColor.value = false
  //   // }
  //   pingZhongColor.value = val
  //   let data = {
  //     pageCode: '110100',
  //     key: '品种',
  //     value: pingZhongColor.value
  //   }
  //   let dict = jiLuDict.value.find((value) => {
  //     return value.key == '品种'
  //   })
  //   putYongHuShiYongXiGuan(dict.id, data).then(() => {})
  // }

  // // 进度条
  // const jingDuTiaoClick = (val) => {
  //   // if (val === true) {
  //   //   showString.value = '关闭'
  //   // } else {
  //   //   showString.value = '显示'
  //   // }
  //   showString.value = val ? '关闭' : '显示'
  //   let data = {
  //     pageCode: '110100',
  //     key: '进度条',
  //     value: showString.value
  //   }
  //   let dict = jiLuDict.value.find((value) => {
  //     return value.key == '进度条'
  //   })
  //   putYongHuShiYongXiGuan(dict.id, data).then(() => {})
  // }

  // 隐藏温湿度框
  const yiChuWenShiDu = () => {
    seleWenDuJi.value = null
    wenShiDuBool.value = false
  }

  // 显示温湿度框
  const xianShiWenShiDu = (item, index) => {
    seleWenDuJi.value = index
    getShiShiWenShiDuData(item.id)
    seleKongTiao.value = item
    // if (item.axisX < 170){
    //   this.wenShiDuLeft = 20
    // }else if (item.axisX > 1070){
    //   this.wenShiDuLeft = 1070
    // } else {
    //   this.wenShiDuLeft = item.axisX - 170
    // }
    // if (item.axisY > 500){
    //   this.wenShiDuTop = 500
    // }else if (item.axisY < 150){
    //   this.wenShiDuTop = 160
    // } else {
    //   this.wenShiDuTop = item.axisY - 150
    // }
    // this.wenShiDuBool = true
  }

  // 获取实时温度
  const getShiShiWenShiDuData = (id) => {
    getShiShiWenShiDu(id).then((res: any) => {
      wenShiDuDict.value = res
      let item = wenShiDuList.value.find((value) => {
        return value.id === wenShiDuDict.value.deviceId
      })
      wenShiDuDict.value.name = item?.name
      wenShiDuDict.value.energyTotal = parseFloat(wenShiDuDict.value.energyTotal).toFixed(1)
      wenShiDuDict.value.humidityActual = parseFloat(wenShiDuDict.value.humidityActual).toFixed(1)
      wenShiDuDict.value.temperatureActual = parseFloat(
        wenShiDuDict.value.temperatureActual
      ).toFixed(1)
      wenShiDuDict.value.timeStamp = dayjs(wenShiDuDict.value.timeStamp).format('YYYY-MM-DD HH:mm')
    })
  }

  // 综合报表
  const ceBianLanRef = ref()
  const ceBianLanClick = () => {
    ceBianLanRef.value.ceBianLanShow()
  }

  const tiShiTitle = (item) => {
    // if (
    //   item.craftNodeName === '细纱' ||
    //   item.craftNodeName === '粗纱' ||
    //   item.craftNodeName === '末并' ||
    //   item.craftNodeName === '梳棉' ||
    //   item.craftNodeName === '预并'
    // ) {
    //   return (
    //     '品种：' +
    //     item.materialName +
    //     '; ' +
    //     '机型：' +
    //     item.machineTypeName +
    //     '; ' +
    //     '状态：' +
    //     CYFF.text(item.stateCode, item.craftNodeName) +
    //     '; ' +
    //     '\n' +
    //     '当前管纱长度：' +
    //     item.currentLength +
    //     '; ' +
    //     '定长：' +
    //     item.fixLength +
    //     '; ' +
    //     '完成百分比：' +
    //     item.yarnPercent +
    //     '%'
    //   )
    // } else {
    //   return (
    //     '品种：' +
    //     item.materialName +
    //     '; ' +
    //     '机型：' +
    //     item.machineTypeName +
    //     '; ' +
    //     '状态：' +
    //     CYFF.text(item.stateCode, item.craftNodeName) +
    //     '; '
    //   )
    // }
    const baseInfo = `品种：${item.materialName}; 机型：${item.machineTypeName}; 状态：${zhuanTai.text(item.stateCode, item.craftNodeName)};`

    const specialProcesses = ['细纱', '粗纱', '末并', '梳棉', '预并']

    if (specialProcesses.includes(item.craftNodeName)) {
      return `${baseInfo}\n当前管纱长度：${item.currentLength}; 定长：${item.fixLength}; 完成百分比：${item.yarnPercent}%`
    }

    return baseInfo
  }

  // 机台点击事件
  const canShuModelZhiJiRef = ref()
  const canShuModelRef = ref()
  const jiTaiClick = (item) => {
    // if (item.craftNodeName === '络筒'){
    //   this.$refs.luoTongCanShuModel.show(item)
    // }else
    gongXuStr.value = item.craftNodeName
    // if (item.craftNodeName === '织机') {
    //   canShuModelZhiJiRef.value.show(item)
    // } else {
    //   biaoQianBool.value = item.biaoQianBool
    //   canShuModelRef.value.show(item)
    // }
    item.craftNodeName === '织机'
      ? canShuModelZhiJiRef.value.show(item)
      : ((biaoQianBool.value = item.biaoQianBool), canShuModelRef.value.show(item))
  }

  const updateScaleRatio = () => {
    let owidth = document.documentElement.clientWidth - 180 - 16
    let oheigth = document.documentElement.clientHeight - 60
    let xiaoPingWidth = 1000
    let xiaoPingHeigth = 700
    // 加一个间距5的缩放
    let houTaiWidth = 1400
    let houTaiHeigth = 800
    if (owidth > xiaoPingWidth && oheigth > xiaoPingHeigth) {
      width.value = owidth
      height.value = oheigth
      contentWidth.value = owidth
      contentHeigth.value = oheigth
      widthRatio.value = owidth / houTaiWidth
      heigthRatio.value = oheigth / houTaiHeigth
    } else if (owidth < xiaoPingWidth && oheigth > xiaoPingHeigth) {
      houTaiWidth = houTaiWidth + 5
      width.value = owidth
      height.value = oheigth
      contentWidth.value = xiaoPingWidth
      contentHeigth.value = oheigth
      heigthRatio.value = oheigth / houTaiHeigth
      widthRatio.value = xiaoPingWidth / houTaiWidth
    } else if (owidth > xiaoPingWidth && oheigth < xiaoPingHeigth) {
      houTaiHeigth = houTaiHeigth + 5
      width.value = owidth
      height.value = oheigth
      contentWidth.value = owidth
      contentHeigth.value = xiaoPingHeigth
      heigthRatio.value = xiaoPingHeigth / houTaiHeigth
      widthRatio.value = owidth / houTaiWidth
    } else if (owidth < xiaoPingWidth && oheigth < xiaoPingHeigth) {
      houTaiWidth = houTaiWidth + 5
      houTaiHeigth = houTaiHeigth + 5
      width.value = owidth
      height.value = oheigth
      contentWidth.value = xiaoPingWidth
      contentHeigth.value = xiaoPingHeigth
      heigthRatio.value = xiaoPingHeigth / houTaiHeigth
      widthRatio.value = xiaoPingWidth / houTaiWidth
    }
  }

  onMounted(() => {
    getYongHuShiYongXiGuanData()
    startTime.value = dayjs()
    getWenShiDuDianWeiXinXiData()
    url.value = window.location.href
    // this.url = 'http://fjcy9.jwesystem.com:8099'
    width.value = document.documentElement.clientWidth - 180 - 20
    height.value = document.documentElement.clientHeight - 60
    updateScaleRatio()
    window.addEventListener('resize', () => {
      nextTick(() => {
        updateScaleRatio()
      })
    })
    getHuoQuHuaBuData()
    getHuoQuCheJianBuJuData()

    clearTimeSet.value = setInterval(() => {
      getHuoQuYuanXinZhuangTaiData()
    }, 10000)
  })

  onUnmounted(() => {
    clearInterval(clearTimeSet.value)
  })
</script>
<style lang="scss">
  .pa {
    position: absolute;
  }
  .status-overview {
    background-image: url('../../../assets/images/jiTaiBuJuBeiJi1.png');
    background-size: 100% 100%;
    width: 100%;
    height: 100%;

    & > div {
      overflow: auto;
    }

    .content-div {
      position: absolute;
      width: 100%;
      height: 100%;

      .canvas-div {
        position: absolute;
        opacity: 0.8;

        .title-div {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          text-align: center;
          margin-top: 5px;
          opacity: 1;
        }
      }

      .baler-div {
        position: absolute;
        background-image: url('../../../assets/images/anniu/机组1.png');
        background-size: 100% 100%;
      }

      .baler-div-copy {
        position: absolute;
        background-image: url('../../../assets/images/anniu/机组2.png');
        background-size: 100% 100%;
      }

      .humiture-div {
        position: absolute;
        z-index: 2;
        & > div {
          width: 15px;
        }

        .anim1 {
          //animation: myfirst 2s infinite;
          background-image: url('../../../assets/images/wenShiDuDianWei.png');
          background-size: 100% 100%;
          width: 20px;
          height: 20px;
        }
      }
      .machine-div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        .machine-body-div {
          height: 100%;
          flex-grow: 2;

          .machine-body-div-content {
            display: flex;
            align-items: flex-start;
            color: #fff;
            height: 80%;
            border-radius: 3px 0 0 0;

            span {
              display: block;
              height: 100%;
              font-size: 12px;
              color: #898787;
              &.span-copy {
                line-height: 100%;
              }
              &.span-copy2 {
                height: auto;
                width: 100%;
              }
            }
          }
          .content-copy {
            height: 75%;
          }
        }
      }
    }

    .progress-bar {
      background-size: 50px 50px;
      background: linear-gradient(to right, #4d70ef, #98b1f1);
      background-size: 100% 100%;
      //background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
      //background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgb(211, 220, 238) 75%, transparent 75%, transparent);
      height: 100%;
      border-radius: 0 3px 3px 3px;
    }
    .animate {
      //content: "";
      //background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
      //z-index: 2;
      //-webkit-background-size: 10px;
      //-webkit-animation: move 2s linear infinite;
      //-webkit-border-top-right-radius: 8px;
      //-webkit-border-bottom-right-radius: 8px;
      //-webkit-border-top-left-radius: 20px;
      //-webkit-border-bottom-left-radius: 20px;
      //overflow: hidden;
    }
  }

  .i-layout-content-main {
    margin: 0px !important;
  }

  .ivu-divider::before {
    border-top: 5px solid #e8eaec !important;
  }

  .ivu-divider::after {
    border-top: 5px solid #e8eaec !important;
  }

  .fit-screen-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
  }

  .shiShiWenDuDiv {
    position: relative;
    padding: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    color: #8a9fb4;
    width: 330px;
    height: 300px;
  }

  @-webkit-keyframes move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 10px 10px;
    }
  }

  .fit-content {
    flex: 1;
    transform-origin: center;
    overflow: hidden;
    position: absolute;
  }

  .bianKuangClass {
    border: 1px solid #5162f8;
    border-right: 0;
  }

  .bianKuang2Class {
    border: 1px solid #5162f8;
    border-bottom: 0;
  }

  .zhuangTaiundefined {
    background-color: #777879;
  }

  .zhuangTai2 {
    background-color: #f3001c;
  }

  .zhuangTai6 {
    background-color: #e68a17;
  }

  .zhuangTai10 {
    background-color: #3d84ef;
  }

  .zhuangTai12 {
    background-color: #f3001c;
  }

  .zhuangTai1 {
    background-color: #10fd7e;
  }

  .zhuangTai0 {
    background-color: #faee00;
  }

  .zhuangTai3 {
    background-color: #777879;
  }

  .zhuangTainull {
    background-color: #777879;
  }

  .zhuangTai5 {
    background-color: #777879;
  }

  .zhuangTai7 {
    background-color: #777879;
  }

  .zhuangTai8 {
    background-color: #eb5431;
  }

  .zhuangTai4 {
    background-color: #f3001c;
  }

  .zhuangTai14 {
    background-color: #f3001c;
  }

  .zhuangTai16 {
    background-color: #f3001c;
  }

  .zhuangTai100 {
    opacity: 0.3; /* 不透明度 */
    background-color: #f3001c;
  }

  .breath_light {
    opacity: 0.1; /* 不透明度 */
    overflow: hidden; /* 溢出隐藏 */ /* 背景色 */

    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath; /* 动画名称 */
    animation-duration: 2s; /* 动画时长3秒 */
    animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite; /* 播放次数：无限 */

    /* Safari and Chrome */
    -webkit-animation-name: breath; /* 动画名称 */
    -webkit-animation-duration: 2s; /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
  }

  @keyframes breath {
    from {
      opacity: 1;
    }
    ///* 动画开始时的不透明度 */
    //50% {
    //  opacity: 1;
    //}
    to {
      opacity: 0.1;
    }
    /* 动画结束时的不透明度 */
  }

  @-webkit-keyframes breath {
    from {
      opacity: 1;
    }
    ///* 动画开始时的不透明度 */
    //50% {
    //  opacity: 1;
    //}
    /* 动画50% 时的不透明度 */
    to {
      opacity: 0.1;
    }
    /* 动画结束时的不透明度 */
  }

  @keyframes myfirst {
    0% {
      transform: translate(0px, 0px);
      -webkit-transition: scale(1);
      -moz-transition: scale(1);
      -ms-transition: scale(1);
      -o-transition: scale(1);
      transform: scale(1);
    }
    50% {
      transform: translate(0px, -15px);
      -webkit-transition: scale(1.4);
      -moz-transition: scale(1.4);
      -ms-transition: scale(1.4);
      -o-transition: scale(1.4);
      transform: scale(1.4);
    }
    100% {
      transform: translate(0px, 0px);
      -webkit-transition: scale(1);
      -moz-transition: scale(1);
      -ms-transition: scale(1);
      -o-transition: scale(1);
      transform: scale(1);
    }
  }
</style>
